<template>
  <div class="home_search main">
    <a class="toHome" :href="url">
      <img src="@/assets/img/zhaopinLogo.png" alt />
    </a>
    <el-input v-model="input" placeholder="搜索"></el-input>
    <el-button type="primary" @click="searchTalent">搜索职位</el-button>
  </div>
</template>

<script>
export default {
  name: 'home_search',
  data () {
    return {
      url: '',
      input: ''
    };
  },
  mounted () {
    this.url = process.env.VUE_APP_URL;
  },
  methods: {
    //   点击搜索人才
    searchTalent () {
      window.open('/#/JobHunting?search=' + this.input);
      this.input = '';
    }
  }
};
</script>

<style lang="css" scope>
.home_search {
    height: 46px;
    display: flex;
    align-items: center;
    margin: 40px auto;
}
.toHome {
    width: 394px;
    height: 67px;
}
.toHome img {
    width: 100%;
    width: 100%;
}

.home_search .el-input {
    margin-left: 140px;
    width: 561px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 6px rgba(51, 51, 51, 0.16);
    opacity: 1;
}
.home_search .el-input /deep/ .el-input__inner {
    height: 48px;
}
.home_search .el-button {
    width: 142px;
    height: 46px;
    background: rgba(24, 147, 252, 1);
    opacity: 1;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 22px;
    color: rgba(255, 255, 255, 1);
    opacity: 1;
    margin-left: 20px;
}
</style>